<template>
  <view>
    <view class="conter-box">
      <view class="login-img">
        <image class="login" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/logo.png"></image>
      </view>
      <view class="name-img">
        <image mode="widthFix" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/loinName.png"></image>
      </view>
      <view class="subTitle">1门课程 7大训练</view>
       <!-- <button type="primary" :loading="true" @click="relation">联系客服</button> -->
      <view class="btn-support btn-zoom" @click="relation">
        <view class="iconfont loading-animation" v-if="loadingState">&#xe891;</view>
        <view class="btn-name">联系客服</view>
      </view>
      <view class="tips">
        <view class="title">温馨提示</view>
        <view>请在手机安装<text class="subTitle">“微信客户端”</text>的情况下打开！</view>
        <view>未安装微信暂时无法跳转！</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
        wxState: false,
        loadingState: false
      }
    },
    onLoad(params) {
      const vm = this
      if(vm.$auth.getUrlPrams("wechat")){
        let audsteatStr = vm.$auth.getUrlPrams("wechat").toLowerCase()
        this.wxState = audsteatStr === 'true' ? true : false
      }
       this.$wechat.unseBehavior()
    },
    methods:{
      // 联系客服
      relation() {
        const vm = this
       vm.loadingState = true
       if(vm.$wechat.isWechat()){
          window.location.href = 'https://work.weixin.qq.com/kfid/kfcc5558b9f43e252fb'
          vm.loadingState = false
        }else{
          let loadDateTime = new Date()
          let linkWxUrl = 'https://work.weixin.qq.com/kfid/kfcc5558b9f43e252fb', 
          iFrame = document.createElement('iframe');
          iFrame.setAttribute('src', linkWxUrl);
          iFrame.setAttribute('style', 'display:none;');
          iFrame.setAttribute('height', '0px');
          iFrame.setAttribute('width', '0px');
          iFrame.setAttribute('frameborder', '0');
          document.body.appendChild(iFrame);
          if(vm.wxState){
            vm.loadingState = false
          }else{
            // iFrame = null;
            setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
            window.document.body.removeChild(iFrame);
              let timeOutDateTime = new Date()
              if (timeOutDateTime - loadDateTime < 6000) {
                 vm.loadingState = false
                 uni.showToast({  title:'请下载微信客户端！',icon:'none' })
               } else {
                 window.close();
               }
            }, 5000)
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter-box{
    padding-top: 30%;
    text-align: center;
    .login-img{
      width: 120rpx;
      height: 120rpx;
      margin: auto;
      .login{
        display: block;
         object-fit: cover;
      }
    }
    .name-img{
      width: 360rpx;
      height: 72rpx;
      margin: 20rpx auto;
    }
    .subTitle{
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 40rpx;
    }
    .btn-support{
      width: 320rpx;
      height: 80rpx;
      background: #FF800C;
      border-radius: 40rpx;
      font-weight: bold;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      margin: auto;
      .loading-animation{
        animation: load 1s linear infinite;
        -moz-animation:load 1s linear infinite;
        -webkit-animation: load 1s linear infinite;
        -o-animation:load 1s linear infinite;
      }
      @-webkit-keyframes load{
        from{-webkit-transform:rotate(0deg);}
        to{-webkit-transform:rotate(360deg);}
      }
      @-moz-keyframes load{
        from{-moz-transform:rotate(0deg);}
        to{-moz-transform:rotate(360deg);}
      }
      @-o-keyframes load{
        from{-o-transform:rotate(0deg);}
        to{-o-transform:rotate(360deg);}
      }
      .btn-name{
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
    // uni-button{
    //   width: 320rpx;
    //   height: 80rpx !important;
    //   line-height: 80rpx !important;
    //   background:  #FF800C;
    //   border-radius: 40rpx;
    //   color: #FFFFFF;
    //   font-weight: bold;
    //   font-size: 32rpx;
    //   text-align: center;
    // }
    // uni-button:after{
    //   border: none!important;
    // }
    // /deep/ uni-button[loading]:before{
    //   margin-right: 20rpx !important;
    // }
    .tips{
      text-align: left;
      margin: 140rpx 0 0 160rpx;
      font-size: 20rpx;
      .title{
        font-size: 24rpx;
        color: #FF2525;
      }
      .subTitle{
        color: #FF2525;
      }
    }
  }
</style>
